Angular Material একটি শক্তিশালী UI লাইব্রেরি, যা অনেক ধরনের কাস্টমাইজেবল বাটন সরবরাহ করে। এই বাটনগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনের ডিজাইনে উন্নতমানের এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য প্রস্তুত করা হয়েছে। এখানে বিভিন্ন ধরনের বাটন যেমন Basic Button, Raised Button, Icon Button, এবং Floating Action Button (FAB) এর বিস্তারিত ব্যাখ্যা দেয়া হলো।

1. Basic Button (বেসিক বাটন)

Basic Button হলো সাদামাটা বাটন যা শুধুমাত্র একটি সাধারণ ক্লিকযোগ্য এলিমেন্ট হিসেবে কাজ করে। এটি কোনো শেড বা উঁচুতা ছাড়া একটি সাধারণ স্টাইলের বাটন।

ব্যবহার:

<button mat-button>Basic Button</button>

• mat-button ডিরেক্টিভ ব্যবহার করা হয়।
• এটি সাধারণত শুধুমাত্র টেক্সট দেখায় এবং কোনো শ্যাডো বা উত্তোলন (elevation) থাকে না।
• এটি বিভিন্ন ধরনের অ্যাকশন বা ইন্টারঅ্যাকশনের জন্য উপযুক্ত।

2. Raised Button (রেইজড বাটন)

Raised Button হলো একটি বাটন যার নিচে একটি শ্যাডো থাকে, ফলে এটি অন্য উপাদানগুলির তুলনায় একটু উঁচুতে থাকে। এই বাটনটি প্রধান অ্যাকশন বাটন হিসেবে ব্যবহৃত হয় এবং এটি ব্যবহারকারীদের নজর আকর্ষণ করতে সহায়তা করে।

ব্যবহার:

<button mat-raised-button>Raised Button</button>

• mat-raised-button ডিরেক্টিভ ব্যবহার করা হয়।
• এটি একটি সাইড শ্যাডো সহ বাটন, যা স্টাইলের মধ্যে এক্সট্রা ডিপথ তৈরি করে।
• এর মাধ্যমে গুরুত্বপূর্ণ অ্যাকশন বা অপশনগুলো প্রদর্শন করা যায়।

কাস্টম রং সহ রেইজড বাটন:

<button mat-raised-button color="primary">Primary Raised Button</button>

এখানে color="primary" দিয়ে বাটনের রঙ নির্ধারণ করা হয়েছে।

3. Icon Button (আইকন বাটন)

Icon Button হলো একটি বাটন যা শুধুমাত্র একটি আইকন ধারণ করে। এটি সাধারণত ছোট সাইজের অ্যাকশন বাটন হিসেবে ব্যবহৃত হয়, যেখানে টেক্সটের পরিবর্তে আইকন ব্যবহার করা হয়।

ব্যবহার:

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

• mat-icon-button ডিরেক্টিভ ব্যবহার করা হয়।
• mat-icon এলিমেন্টের মাধ্যমে আইকন যোগ করা হয়।
• এটি সাধারণত টুলবার বা সাইড মেনুর আইকন হিসেবে ব্যবহৃত হয়।

4. Floating Action Button (FAB) (ফ্লোটিং অ্যাকশন বাটন)

Floating Action Button (FAB) একটি বিশেষ ধরনের বাটন যা অ্যাপ্লিকেশনের স্ক্রিনের নিচে বা মাঝখানে সাসপেন্ডেড অবস্থায় থাকে এবং সাধারণত একটি প্রধান অ্যাকশন নির্দেশ করে। FAB ব্যবহারকারীকে প্রধান কাজগুলো দ্রুত সম্পাদন করতে সহায়তা করে। এটি সাধারণত একটি গোলাকার বাটন এবং বড় আকারে থাকে।

ব্যবহার:

<button mat-fab color="accent">
  <mat-icon>add</mat-icon>
</button>

• mat-fab ডিরেক্টিভ ব্যবহার করা হয়।
• এটি সাধারণত গোলাকার বাটন তৈরি করে এবং একটি আইকন ধারণ করে।
• color="accent" এর মাধ্যমে FAB এর রঙ কাস্টমাইজ করা যায়।

Mini FAB: ছোট আকারের FAB বাটন তৈরি করতে mat-mini-fab ব্যবহার করা হয়।

<button mat-mini-fab>
  <mat-icon>add</mat-icon>
</button>

এটি একটি ছোট আকারের ফ্লোটিং অ্যাকশন বাটন তৈরি করবে।

বাটন কাস্টমাইজেশন

Angular Material এর বাটনগুলোর সাথে বিভিন্ন ধরনের কাস্টমাইজেশন করা যায়। যেমন:

• Color: বাটনের রঙ পরিবর্তন করতে color অ্যাট্রিবিউট ব্যবহার করা হয়। Angular Material তিনটি রঙের বিকল্প প্রদান করে: primary, accent, এবং warn।
• Disabled State: বাটনকে নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করা হয়।

উদাহরণ:

<button mat-raised-button color="primary" [disabled]="isDisabled">Primary Button</button>

এখানে isDisabled একটি ভ্যারিয়েবল যা যদি true হয়, তবে বাটনটি নিষ্ক্রিয় থাকবে।

Angular Material এর বিভিন্ন ধরনের বাটন যেমন Basic, Raised, Icon, এবং Floating Action Button (FAB) আপনার অ্যাপ্লিকেশনে একটি আধুনিক, প্রফেশনাল, এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে, এবং সহজেই কাস্টমাইজ করা যায় আপনার প্রয়োজন অনুযায়ী।